<template>
  <div>
    <quill-editor
      class="quill"
      v-model="str"
      ref="myQuillEditor"
      :value="quillContent"
      :options="editorOption"
      @change="onEditorChange"
    ></quill-editor>

    <el-upload
      accept="image/png,image/jpeg,image/jpg,image/gif"
      class="avatar-uploader quill-img"
      :before-upload="getcloudDataMthod"
      action="/file/fileMapping/uploadAvatarVIPHall"
      :multiple="false"
      :show-file-list="false"
      :on-success="uploadSuccess"
      :data="uploadFileData"
    >
    </el-upload>
  </div>
</template>
 
<script>
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  [{ header: 1 }, { header: 2 }],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ direction: "rtl" }],
  [{ color: [] }, { background: [] }],
  [{ align: [] }],
  ["image"],
];
export default {
  props: {
    quillContent: {
      type: String,
      default: "",
    },
  },
  data() {
    const _this = this;
    return {
      str:"",
      pictureUrl: "",
      uploadFileData: null,
      editorOption: {
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              image(value) {
                if (value) {
                  document.querySelector(".quill-img input").click();
                } else {
                  _this.quill.format("image", false);
                }
              },
            },
          },
        },
      },
    };
  },
  methods: {
    uploadSuccess(res) {
      console.log(res);
      const quill = this.$refs.myQuillEditor.quill;
      quill.focus();
      quill.insertEmbed(quill.getSelection().index, "image", res[0]);
    },
    onEditorChange(e) {
     this.str= e.html
      this.$emit("update:quillContent", e.html);

    },
    getcloudDataMthod() {},
  },
};
</script>

<style>
.quill{
  color: 1px solid red;
  height: 500px;
}
</style>
 